<template>
  <!-- 如果你想要默认自动去除用户输入内容中两端的空格，你可以在 v-model 后添加 .trim 修饰符： -->
  <!-- 默认情况下，v-model 会在每次 input 事件后更新数据 (IME 拼字阶段的状态例外)。你可以添加 lazy 修饰符来改为在每次 change 事件后更新数据： -->
  <input type="text" autocomplete="off" v-model.trim.lazy="slogan">
  <h1 v-text="slogan"></h1>
  <input type="text" autocomplete="off" :value="slogan" @input="inputValue">
  <br>
  <!--
    如果你想让用户输入自动转换为数字，你可以在 v-model 后添加 .number 修饰符来管理输入：
		如果该值无法被 parseFloat() 处理，那么将返回原始值。
		.number 修饰符会在输入框有 type="number" 时自动启用
  -->
  <input type="text" autocomplete="off" v-model.trim.number="age">
  <h1 v-text="typeof age"></h1>

</template>

<script>

export default {
  name: 'App',
  data() {
    return {
      slogan: '桃李不言下自成蹊',
      gender: 1,
      checked: true,
      hobbies: ["swimming", "skiing"],
      hometown: 'jilin',
      fruits: ['pear'],
      age: 0
    }
  },
  methods: {
    inputValue(e) {
      console.log(e.target.value);
      this.slogan = e.target.value;
    }
  },
  watch: {
    slogan(newValue, oldValue) {
      console.log(`newValue >>> ${newValue.length} \t oldValue >>> ${oldValue}`)
    }
  }
}
</script>

<style>

ul > li {
  list-style: none;
}

.box {
  border-radius: 50%;
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
